<template>
  <div>
    <!--  tableData:表格数据  
          total：表格数据数量  
          title：每个页面的标题跟随tab切换改变 
          info：分页的参数
          by：触发毕业按钮的事件
          handleSizeChange：每页数据的数量发生改变触发
          handleCurrentChange：当前页码发生改变触发
          delUser：删除学生信息触发
    -->
    <Table
      :tableData="list"
      :total="total"
      :title="title"
      :info="obj"
      @by="by"
      @handleSizeChange="change"
      @handleCurrentChange="handleCurrentChange"
      @delUser="del"
    ></Table>
  </div>
</template>

<script>
import Table from "../components/tableView";
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "",
  components: {
    Table,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const data = reactive({
      list: [],
      obj: {
        major: "quanzhan",
        pagenum: 1,
        pagesize: 2,
      },
      total: 8,
      title: "", //动态标题 根据tab切换更改
    });
    // 获取标题，可以自定义
    data.title = store.state.info.title || router.currentRoute.value.name;
    const getlist = () => {
      store.dispatch("getquanzhan", data.obj).then((res) => {
        let arr = JSON.parse(JSON.stringify(res.data));
        arr.forEach((item) => {
          item.major = "全栈开发";
        });
        data.list = arr;
        data.total = res.total;
      });
    };
    getlist();
    const by = (val) => {
      if(val.graduation){
        ElMessage.warning("已经毕业了")
        return false
      }
      ElMessageBox.confirm("是否毕业?", "毕业信息", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.dispatch("by", val).then((res) => {
        console.log(res);
        ElMessage({
          type: "success",
          message: "确定毕业",
        });
        getlist();
      });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消毕业",
          });
        });
      
    };
    const del = (val) => {
      ElMessageBox.confirm("是否删除?", "删除学生信息", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.dispatch("dels", val).then((res) => {
            getlist();
            ElMessage({
              type: "success",
              message: "删除成功",
            });
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    };
    const change = (val) => {
      data.obj.pagesize = val;
      getlist();
    };
    const handleCurrentChange = (val) => {
      data.obj.pagenum = val;
      getlist();
    };
    return {
      ...toRefs(data),
      by,
      del,
      change,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped lang='scss'>
</style>